import React from 'react';
import { connect } from 'dva';

import {
  Form, Modal,Input,Icon,Button,Checkbox
} from 'antd';
function Adduser({dispatch,form,addUser} ){
 
  const { getFieldDecorator } = form;
  let handleCancel = (e) => {
    dispatch({
      type: 'user/setState',
      payload: {
        addUser:{
            addUservisible:false
          }
      }
    })
  }
  
  function registerVIP(e) { 
    dispatch({
        type:'user/setState',
        payload:{
          isCheckd:!e.target.checked,
        }
    })
 }
  function Submit(e) {
    e.preventDefault();
    form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
      console.log(values)
      if(values.vip){
        addUser.isvip=1
      }else addUser.isvip =0;
      dispatch({
        type:'user/register',
        payload:{
          username:values.userName,
            password:values.passWord,
            isvip:addUser.isvip
        }
    })
    dispatch({
      type:'user/setState',
      payload:{
          isvip:addUser.isvip
      }
  })
 });   
}
  return (
    <div>
   {
     addUser.addUservisible?  <Modal
     title="添加用户"
     visible={addUser.addUservisible}
     onOk={Submit}
     onCancel={handleCancel}
     okText="保存"
     cancelText="取消"
   >
 <Form onSubmit={Submit} className="login-form" layout="vertical">
   <Form.Item   label="用户名"  wrapperCol={{ span: 24 }} style={{ marginTop: 20 }}>
     {getFieldDecorator('userName', {
       rules: [{ required: true, message: 'Please input your username!' }],
     })(
       <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="请输入用户名"  />
     )}
   </Form.Item>

   <Form.Item  label="密码"  wrapperCol={{ span: 24 }} style={{ marginTop: 22 }}>
     {getFieldDecorator('passWord', {
       rules: [{ required: true, message: 'Please input your Password!' }],
     })(
       <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请输入密码" />
     )}
   </Form.Item>

   <Form.Item  style={{ marginTop: 22 }}>
     {getFieldDecorator('vip', {
       valuePropName: 'checked',
       initialValue: true,
     })(
       <Checkbox onChange={registerVIP} setFieldsValue={{ checked: addUser.isCheckd }}>是否添加为会员</Checkbox>
     )}
     </Form.Item>
   
   
 </Form>

   </Modal>
      :null
   }
     
    </div>
  );
}
const AdduserForm = Form.create({ name: 'normal_register' })(Adduser);
export default connect(({ user }) => ({ ...user }))(AdduserForm)
